<template>
	<view class="vIntegralPage">
		<u-navbar title="V积分" @leftClick="goCustomNavBack"  :titleStyle="titleStyle" bgColor="transparent" :autoBack="true" leftIconColor="#fff">
		</u-navbar>
		<view class="inviteBg">
			<u--image src="/static/vIntegral/1.png" shape="square" mode="aspectFill" width="100vw" height="35vh">
			</u--image>
		</view>
		<view style="height: 35vh;">
			<view class="integralInfo">
				<view class="integralTitle">当前V积分</view>
				<view class="integralAmount">{{integral}}</view>
			</view>
		</view>
		<view class="barTitle">V积分充值</view>
		<view class="couponContent">
			<view v-for="(item,index) in couponList" :key="index" class="couponList" @click="showExchange = true">
				<view class="couponImage">
					<u--image src="/static/vIntegral/2.png" shape="square" mode="aspectFill" height="224rpx"
						width="680rpx">
					</u--image>
				</view>
				<view class="couponLeft">
					<view class="title">{{item.title}}</view>
					<view class="type">{{item.type}}</view>
					<view class="time">{{item.endTime}}</view>
				</view>
				<view class="couponRight">￥{{item.amount}}</view>
			</view>
		</view>
		<u-popup :show="showExchange" :round="10" mode="bottom" @close="doClose">
			<view class="exchangePanel">
				<view class="title">联系客服</view>
				<view class="detail">
					<view class="userScore">暂未开通在线积分充值渠道。</view>
					<view class="userScore">您可添加客服微信获取更多V积分。</view>
					<view class="vBtn" @click="contact">联系客服</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showExchange: false,
				titleStyle: {
					color: "#ffffff"
				},
				userId:"",
				integral: 0,
				couponList: [{
					title: "新用户专享",
					type: "V+100",
					endTime:new Date().format("YYYY-MM-dd 23:59")+"到期",
					amount: "8.88"
				}, {
					title: "新用户专享",
					type: "V+100",
					endTime: new Date().format("YYYY-MM-dd 23:59")+"到期",
					amount: "8.88"
				}, {
					title: "新用户专享",
					type: "V+100",
					endTime: new Date().format("YYYY-MM-dd 23:59")+"到期",
					amount: "18.88"
				}, {
					title: "新用户专享",
					type: "V+100",
					endTime: new Date().format("YYYY-MM-dd 23:59")+"到期",
					amount: "88.88"
				}]
			}
		},
		onLoad() {
			uni.getStorage({
				key: "userInfo",
				success: (res) => {
					let info = res.data;
					this.userId = info.id
					this.$request.get(this.$api.getUserById, {
						id: this.userId
					}).then(result => {
						this.integral = result.result.integral;
						uni.hideLoading()
					})
				},
			})
		},
		methods: {
			doClose() {
				this.showExchange = false
			},
			contact() {
				uni.navigateTo({
					url: "/pages/custumService/custumService"
				})
			}
		}
	}
</script>

<style lang="scss">
	.vIntegralPage {
		background: #f5f5f5;

		.inviteBg {
			position: absolute;
			left: 0;
			top: 0;
			z-index: 0;
		}

		.integralInfo {
			z-index: 1;
			display: flex;
			flex-direction: column;
			justify-content: center;
			height: 35vh;
			position: relative;
			padding-left: 40rpx;

			.integralTitle {
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				font-size: 28rpx;
				line-height: 80rpx;
			}

			.integralAmount {
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
				font-size: 58rpx;
				line-height: 80rpx;
			}
		}

		.barTitle {
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #333333;
			font-size: 40rpx;
			line-height: 40rpx;
			padding: 40rpx 34rpx;
		}

		.couponContent {
			padding: 0rpx 34rpx 40rpx;
			position: relative;

			.couponList {
				position: relative;
				display: flex;
				flex-wrap: nowrap;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 20rpx;
				height: 224rpx;

				.couponImage {
					position: absolute;
					top: 0;
					left: 0;
					z-index: 0;
				}

				.couponLeft {
					z-index: 1;
					display: flex;
					justify-content: space-between;
					flex-direction: column;
					height: 172rpx;
					padding: 26rpx;

					.title {
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
						font-size: 30rpx;
					}

					.type {
						font-size: 58rpx;
						line-height: 88rpx;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: bold;
						color: #FFFFFF;
					}

					.time {
						font-size: 26rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
					}
				}

				.couponRight {
					z-index: 1;
					width: 250rpx;
					text-align: center;
					font-size: 50rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #FFC400;
				}
			}
		}

		.exchangePanel {
			display: flex;
			text-align: center;
			flex-direction: column;

			.title {
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #666666;
				font-size: 28rpx;
				border-bottom: 1rpx solid #eee;
				height: 100rpx;
				line-height: 100rpx;
			}

			.detail {
				line-height: 50rpx;
				display: flex;
				align-items: center;
				flex-direction: column;
				padding: 40rpx 0;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
				font-size: 30rpx;

				.vBtn {
					background: linear-gradient(180deg, #87C5FC 0%, #247FFF 100%);
					border-radius: 48rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #FFFFFF;
					font-size: 34rpx;
					height: 96rpx;
					line-height: 96rpx;
					width: 680rpx;
					margin-top: 40rpx;
				}
			}
		}
	}
</style>
